<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .toggle{
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        gap: 1px;
        flex-direction: column;
        align-items: center;
    }
    .toggle .bars{
        width: 100%;
        height: 4px;
        background-color: rgb(176, 92, 255);
    }
    #bar1{
        width: 70%;
    }
</style>
<body>
    <input type="checkbox" id="checkbox">
    <label for="checkbox" class="toggle">
        <div class="bars" id="bar1"></div>
        <div class="bars" id="bar2"></div>
        <div class="bars" id="bar3"></div>
    </label>
    <span class="text">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="22"
          height="22"
          class="bi bi-send-fill"
          viewBox="0 0 16 16"
        >
          <path
            d="M15.964.686a.5.5 0 0 0-.65-.65L.767 5.855H.766l-.452.18a.5.5 0 0 0-.082.887l.41.26.001.002 4.995 3.178 3.178 4.995.002.002.26.41a.5.5 0 0 0 .886-.083zm-1.833 1.89L6.637 10.07l-.215-.338a.5.5 0 0 0-.154-.154l-.338-.215 7.494-7.494 1.178-.471z"
          ></path>
        </svg>
      </span>
</body>
</html>